<template>
  <div class="appdc-pj">
    <!-- 评论标题 -->
    <div class="appc-font">用户评价</div>

    <!-- 筛选条件 -->
    <div class="appc-c">
      <p>全部（{{ comments.length }}）|</p>
      <p>有图有视频（{{ comments.filter(c => c.commentImage.length > 0).length }}）|</p>
      <p>增评（0）</p>
    </div>

    <!-- 动态渲染评论内容 -->
    <div v-for="(comment, index) in comments" :key="index" class="hader">
      <div class="header--UkTPdr33">
        <!-- 头像 -->
        <div>
          <img :src="comment.avatar" />
        </div>

        <!-- 用户名称和购买信息 -->
        <div>
          <p>{{ comment.username }}</p>
          <p>{{ comment.purchaseInfo }}</p>
        </div>

        <!-- 点赞 -->
        <div>
          <p>有用的</p>
        </div>
      </div>

      <!-- 评论内容 -->
      <div class="avatar--Fl428_E4">
        <p>{{ comment.content }}</p>
        <!-- 如果存在评论图片，则渲染所有图片 -->
        <div v-if="comment.commentImage.length > 0">
          <img v-for="(img, index) in comment.commentImage" :key="index" :src="img" alt="评论图片" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import "./appraise.css";
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import axios from "axios";  // 引入 axios

// 获取商品ID
const route = useRoute();
const productId = ref(route.params.id);  // 获取商品 id
console.log(productId.value)

// 定义评论数据数组
const comments = ref([]);

// 获取评论数据的函数
const fetchComments = async () => {
  try {
    const response = await axios.get("http://localhost:8080/home/apprai", {
      params: { productId: productId.value },
    });
    if (response.data.status === 200) {
      comments.value = response.data.data.map((comment) => ({
        avatar: comment.username.profilepicture || "default-avatar.png", // 头像
        username: comment.username.username, // 用户名
        purchaseInfo: `${comment.productname.productname} ${comment.reviewTime}`, // 购买信息
        content: comment.review, // 评论内容
        commentImage: comment.imageurl.map(img => img.imageurl) || [] // 评论图片 (处理为数组)
      }));
      // 输出数据到控制台
      console.log("评论数据：", comments.value);
    } else {
      console.error("请求失败:", response.data.message);
    }
  } catch (error) {
    console.error("网络错误:", error);
  }
};

// 在组件挂载时获取数据
onMounted(() => {
  fetchComments();
});

</script>
